<template>
  <div class="login-back">
    <div class="login-logo"></div>
    <div class="login-box">
      <div class="login-title">登录</div>

      <el-form
        class="login-body"
        :model="form"
        label-width="0"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item prop="email"
          ><p style="font-size: 10px; margin-bottom: 8px">邮箱</p>
          <el-input size="large" v-model="form.email"
        /></el-form-item>
        <el-form-item prop="password">
          <p style="font-size: 10px; margin: 0 200px 8px 0">密码</p>
          <a
            style="font-size: 10px; color: #6777ef; text-decoration: none"
            href=""
            >忘记密码？</a
          >
          <el-input size="large" type="password" v-model="form.password"
        /></el-form-item>
        <el-button
          size="large"
          style="width: 100%"
          type="primary"
          @click="submit(ruleFormRef)"
          >登录</el-button
        >
        <div class="login-input regin">
          <span>还没有账号？ <a href="">马上注册</a></span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { LoginData } from "./LoginType";
import type { FormRules, FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { loginByEmail } from "../../request/userApi";
import { useRouter } from "vue-router";

const form = reactive(new LoginData());
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
let validateEmail = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("邮箱不能为空！"));
  } else {
    const reg = /^[1-9][0-9]{2,}@qq.com$/;
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error("邮箱格式不正确！"));
    }
  }
};
const rules = reactive<FormRules>({
  email: [{ required: true, validator: validateEmail }],
  password: [{ required: true, message: "请输入密码" }],
});

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginByEmail(form).then((res: any) => {
        if (res.successed) {
          localStorage.setItem("Token", res.token);
          ElMessage({
            message: "登录成功",
            type: "success",
          });
          router.push("/");
        }
      });
    } else {
      ElMessage.error("请填写正确邮箱和密码");
    }
  });
};
</script>

<style lang="scss" scoped>
.login-back {
  width: 100%;
  height: 100%;
  background: #f4f6f9;
  .login-logo {
    height: 30%;
  }
  .login-box {
    width: 350px;
    height: 420px;
    margin: 0 auto;
    border-top: #6777ef 2px solid;
    border-radius: 5px;
    background: #ffffff;

    .login-title {
      height: 70px;
      line-height: 70px;
      padding: 0 25px;
      color: #6777f2;
      font-weight: bold;
      border-bottom: #f9f9f9 1px solid;
    }

    .login-body {
      padding: 20px 25px;
      .login-input {
        height: 70px;
        margin-bottom: 25px;
      }
      .regin {
        font-size: 14px;
        line-height: 70px;
        text-align: center;
        color: #98a6ad;
      }
    }
  }
}
.left-right {
  display: flex;
  justify-content: space-between;
}
</style>
